// 1找到图片
let image = $('#image')

// 2.剪裁配置项
let option = {
    aspectRatio :1,//正方形
    preview: '.img-preview'//
}
// 3.调用cropper方法 创建裁剪区
image.cropper(option)


// ------------------点击上传  触发文件域的单击事件------------
$('button:contains("上传")').on('click',function(){
    $('#file').trigger('click')
})


// ---------------选择了图片，更换裁剪区的图片------------
$('#file').on('change',function(){
    if(this.files.length>0){
        let fileobj = this.files[0]

        let url = URL.createObjectURL(fileobj)

        image.cropper('replace',url)
    }
})



// ---------------------完成更换----------------------
// 点击确定按钮--》裁剪图片 --》转换成base64格式--》提交给接口
$('button:contains("确定")').on('click',function(){
    // 裁剪图片
    let canvas = image.cropper('getCroppedCanvas',{width:30,height:30})
    // canvas有一套内置的API方法，属于JS原生语法(只有指定jpg格式，才能指定图片质量这个参数)
    let base64 = canvas.toDataURL('image/jpeg',0.3)

    axios.post(`/my/user/avatar`,`avatar=${encodeURIComponent(base64)}`).then(res=>{
        let {status,message} = res.data
        if(status===0){
            layer.msg(message)
            // 更新index.html的头像
            window.parent.getUserInfo()
        }
    })

})